<%- include header %>
<div class="container">
  <div class="row">
    <div class="col-lg-4 col-lg-offset-4">
      <div class="row">
        <div class="primary-box form-box">
          <div class="primary-box-bd">
            <form method="post" class="regForm">
              <div class="form-group">
                <h3 class="text-center form-title">Sign up</h3>
              </div>
              <div class="form-group">
                <div class="input-group">
                  <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
                  <input type="text" class="form-control" name="name" placeholder="请输入用户名">
                </div>
              </div>
              <div class="form-group">
                <div class="input-group">
                  <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                  <input type="password" class="form-control" name="password" placeholder="请输入密码">
                </div>
              </div>
              <div class="form-group">
                <div class="input-group">
                  <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                  <input type="password" class="form-control" name="passwordRepeat" placeholder="请再次输入密码">
                </div>
              </div>
              <div class="form-group">
                <div class="input-group">
                  <div class="input-group-addon"><span class="glyphicon glyphicon-folder-close"></span></div>
                  <input type="email" class="form-control" name="email" placeholder="请输入邮箱地址">
                </div>
              </div>
              <div class="form-group">
                <div class="input-group">
                  <div class="input-group-addon"><span class="glyphicon glyphicon-folder-close"></span></div>
                  <input type="text" class="form-control" name="phone" placeholder="请输入手机号">
                </div>
              </div>
              <div class="form-group text-right">
                <button type="submit" class="btn btn-lg btn-block btn-success">注册</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
    $(function () {
        $('.regForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                name: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            min: 8,
                            max: 20,
                            message: '用户名长度必须位于8到20之间'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 8,
                            max: 20,
                            message: '密码长度必须位于8到20之间'
                        }
                    }
                },
                passwordRepeat: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 8,
                            max: 20,
                            message: '密码长度必须位于8到20之间'
                        },
                        identical: {
                            field: 'password',
                            message: '两次密码输入不一致'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱地址不能为空'
                        },
                        emailAddress: {
                            message: '请输入正确的邮箱地址'
                        }
                    }
                },
                phone: {
                    validators: {
                        notEmpty: {
                            message: '手机号不能为空'
                        },
                        stringlength: {
                            min: 11,
                            max: 11,
                            message: '请输入11位手机号码'
                        },
                        regexp: {
                            regexp: /^1[3|5|8]{1}[0-9]{9}$/,
                            message: '请输入正确的手机号码'
                        }
                    }
                }
            }
        });
    });

</script>
<%- include footer %>